﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../scripts/footer.js"></script>
    <script src="../src/js/rayui.js" use="loadingbtn"></script>
    <script src="../scripts/common.js"></script>
    <style>
        body {
            padding: 20px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h3>1、等待按钮，不可使用input标签</h3>
    <a class="rayui-btn btn-primary" id="loadbtn0">模拟执行中，3秒后关闭</a>
    <a class="rayui-btn btn-success" id="loadbtn1">等待按钮</a>
    <div class="card">
        <pre class="word-wrap">
使用方法：
var ins = $("selector").loadingBtn(options);
var ins = rayui.loadingbtn.render(options);此时option必须含有elem属性

1、options参数为layer弹窗中loading的参数，还包括一下属性：
    elem：标签，视调用方法而定
    auto：是否自动开始，可选true|false，默认false，需要手动调用start方法
    right：是否在最右边，可选true|false，默认false
    loadingText: 加载时显示文本
    disabledClass：是否添加禁用样式，可选true|false，默认true

2、ins返回对象包含两个方法：
        a）start(waittime)：开始等待，waittime为等待时间，默认30秒，等待时间过后无论是否触发stop都会自动停止
        b）stop()：停止等待
<p class="font-color-red">
注意：
页面上此按钮一定要先调用loadingBtn方法，再绑定其他方法，否则无法阻断方法调用
</p>
</pre>
    </div>


    <script>
        rayui.ready(function () {
            //等待按钮
            var btnloadIns = $("#loadbtn0").loadingBtn({ auto: false });
            $("#loadbtn0").click(function () {
                btnloadIns.start(3000);
            });
            var btnloadIns1 = $("#loadbtn1").loadingBtn({ auto: false, disabledClass: false, loadingText: "请求中……" });
            $("#loadbtn1").click(function () {
                btnloadIns1.start(3000);
            });

        });

    </script>


</body>
</html>